<script setup>
// import tableData from '~mock/menu'
import { reactive, ref,onMounted } from 'vue'
import { checkMobile, checkPassword } from '@/utils/validate'
import { menuAdd, menuUpdate,menuAll } from '@/api/menu'
const emit=defineEmits(['flush'])
// 表单数据
const formData = ref({

})

// 表单验证
const formRules = reactive({
  parentId: [
    { required: true,  message: '请选择菜单', trigger: 'change' }
  ],
  type: [
    { required: true, message: '请选择菜单类型',  trigger: 'blur' }
  ],
  authName: [
    { required: true,  message: '请输入菜单名称', trigger: 'blur' }
  ],
  sort: [
    { required: true, message: '请输入排序数字',   trigger: 'blur' }
  ],

  level: [
    { required: true,  message: '请输入菜单级别',  trigger: 'blur' }
  ]
})
// 提交验证
const formRef = ref()
const onSubmit = () => {
  formRef.value.validate(async(isSuccess) => {
    if (isSuccess) {
      //请求接口
      let r
      if(formData.value.id>0){
        //修改
        r= await menuUpdate(formData.value)
      }else{
        //新增
        r= await menuAdd(formData.value)
      }
      if(r.code==200){
        ElMessage({type: 'success', message: '操作成功' })
        state.value=false
        //调用父组件的函数，实现列表刷新
        emit('flush')
        loadData()
        onReset()
      }else{
        ElMessage({type: 'success', message: '操作失败' })
       
      }
    }
  })
}
const onReset = () => {
  // formRef.value.resetFields()
  formData.value={}
}

// 对话框状态
const state = ref(false)

const props = {
  children: 'children',
  label: 'authName',
  value: 'id'
}
const menuTree = ref()
const loadData = async() =>{
  
 let r = await menuAll()
 menuTree.value = r.data
  console.log(menuTree.value)
}

onMounted(()=>{
  loadData()
})
// 暴露
defineExpose({
  state,
  formData
})

const dialogCancle = ()=>{
  onReset()
  state.value = false

}
</script>
<template>
  <el-dialog
    v-model="state"
    :title="`${formData.id ? '修改' : '添加'}菜单`"
    width="600"
    :before-close="dialogCancle"
  >

    <!-- 内容 -->
    <el-form
      v-if="state"
      size="large"
      label-width="80"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <el-form-item label="所属菜单" prop="parentId">
        <el-tree-select
          v-model="formData.parentId"
          :data="[{ authName: '一级菜单', id: 0, children: menuTree }]"
          :props="props"
          check-strictly=true
          :render-after-expand="true"
        />
      </el-form-item>

      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="formData.type" class="ml-4">
          <el-radio :label="1" size="large">菜单</el-radio>
          <el-radio :label="2" size="large">按钮</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="菜单图标" prop="icon">
        <el-input placeholder="请输入菜单图标" v-model="formData.icon" />
      </el-form-item>

      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="authName">
            <el-input placeholder="请输入菜单名称" v-model="formData.authName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input type="number" v-model="formData.sort" />
          </el-form-item>
        </el-col>
      </el-row>

     <el-row>
        
        <el-col :span="12">
          <el-form-item label="路由地址" prop="path">
            <el-input type="text" v-model="formData.path"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单级别" prop="level">
            <el-input type="number" v-model="formData.level" />
          </el-form-item>
        </el-col>
      </el-row>

        <!--<el-row>
        <el-col :span="12">
          <el-form-item label="是否状态" prop="mobile">
            <el-radio-group v-model="formData.type" class="ml-4">
              <el-radio :label="1" size="large">显示</el-radio>
              <el-radio :label="2" size="large">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        </el-row> -->
        <el-col :span="12">
          <el-form-item label="菜单状态" prop="status">
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio :label="0" size="large">正常</el-radio>
              <el-radio :label="1" size="large">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      

      <el-form-item label="">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="dialogCancle">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
